{extend name="main"}
{block name="style"}
{css href="__TEMPLATE_STATIC__/user.css"}
{/block}
{block name="header"}
{include file="module/user_top_nav"/}
{/block}
{block name="body"}
<div class="flex1 flex h-100">
	<div class="w-180px bg-dark p-4 overflow-y-auto">
	{include file="module/user/company_left" left="module/user/company_left_jobs"/}
	</div>
	<div class="frame-body flex-1 overflow-y-auto py-3">
		<div class="container-xl bg-white shadow pb-3">
			<div class="flex mb-3">
				<div class="block-title-before py-2">我的打赏</div>
			</div>
			<div class="border-bottom mb-3 pb-3">
				<el-form :model="search" @submit.native.prevent="submitForm('form')" :rules="{}" ref="form" label-width="120px" label-position="right">
					<div class="flex">
					  <el-form-item label="有效职位：" prop="email" class="flex-1 mb-2">
					    <el-select v-model="search.email" placeholder="全部职位" size="mini" class="rounded-0">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					  </el-form-item>
					  <el-form-item label="待处理：" prop="email" class="flex-1 mb-2">
					    <el-select v-model="search.email" placeholder="不限" size="mini" class="rounded-0">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					  </el-form-item>
					</div>
					<div class="flex">
					  <el-form-item label="打赏方式：" prop="email" class="flex-1 mb-2">
					    <el-select v-model="search.email" placeholder="全部方式" size="mini" class="rounded-0">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					  </el-form-item>
					  <el-form-item label="打赏状态：" prop="email" class="flex-1 mb-2">
					    <el-select v-model="search.email" placeholder="不限" size="mini" class="rounded-0">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					  </el-form-item>
					</div>
				</el-form>
			</div>
			<div class="table-responsive">
				<el-table
					ref="multipleTable"
			      	:data="tableData"
		    		stripe
		    		v-loading="search.ajax"
		    		style="width: 100%;"
		    		header-cell-class-name="bg-1E54E5 text-666666">
			      <el-table-column
			        prop="create_time"
			        label="时间"
			        width="180">
			      </el-table-column>
			      <el-table-column
			        prop="salary"
			        label="积分"
			        width="120">
			      </el-table-column>
			      <el-table-column
			        prop="title"
			        label="来源"
			        show-overflow-tooltip>
			      </el-table-column>
			    </el-table>
			</div>
			<div class="table-responsive py-3 text-center">
				<el-pagination
				  background
				  :hide-on-single-page="true"
				  @current-change="getServerMessage"
			      :current-page="search.page"
			      :page-size="15"
			      layout="total,  prev, pager, next, jumper"
			      :total="search.total">
			    </el-pagination>
			</div>
		</div>
	</div>
</div>
{/block}
{block name="footer"}
{include file="module/login"/}
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			userInfo:UserInfo,
			loginTabs:XYBase.loginTabs,
			feedback:XYBase.feedback,
			search:{
				email:'',
		    	ajax:false,
				total:100,
				page: 1
			},
			activeName:'publishing',
			tableData:[{title:'消息标题',company_name:'深圳市五合嘉顿西餐厅',status:1,area:'深圳市/福田区',salary:'6-8K/月',create_time:'2020-5-18 15:48:12'},{title:'消息标题消息标题消息标题消息标题消息标题消息标题消息标题消息标题消息标题消息标题消息标题消息标题',company_name:'深圳市五合嘉顿西餐厅',area:'深圳市/福田区',salary:'6-8K/月',status:0,create_time:'2020-5-18 15:48:13'}],
			options: [{
	          value: '选项1',
	          label: '黄金糕'
	        }, {
	          value: '选项2',
	          label: '双皮奶'
	        }, {
	          value: '选项3',
	          label: '蚵仔煎'
	        }, {
	          value: '选项4',
	          label: '龙须面'
	        }, {
	          value: '选项5',
	          label: '北京烤鸭'
	        }],
		},
		watch:{
		    view:XYBase.viewWatch,
		    loginTabs:XYBase.loginTabsWatch,
			userInfo:{
				handler(val,oldVal){
					if (!val.id) {
						window.location.reload();
					}
				},
				deep:true
			},
		},
		created(){
			XYBase.created(this);
		},
		methods:XYBase.methods({
			toggleSelection(rows) {
				if (rows) {
				  rows.forEach(row => {
				    this.$refs.multipleTable.toggleRowSelection(row);
				  });
				} else {
				  this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			filterHandler(value, row, column){
				console.log(value);
		        const property = column['property'];
		        return row[property] === value;
			},
			getServerMessage(val){
			},
			showMessage(data){},
			deleteMessage(index,data){},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					_this.sendPost({
						url:url,
						data:D
					},function(ret){
				        loading.close();
				        if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
							}else{
								XYBase.msg(ret.msg);
							}
				        }
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
		})
	});
</script>
{/block}